<template>
  <div class="item-card">
    <el-form label-width="80px" size="small">
      <el-popover
        placement="left"
        title="转换说明"
        width="200"
        trigger="hover"
        content="Cesium.Cartesian3.fromDegrees(longitude, latitude, height)">
        <div>角度转弧度：Cesium.Math.toRadians(45.0)</div>
        <div>弧度转角度：Cesium.Math.toDegrees(1/4 * Math.PI)</div>
        <div>弧度最大值：2∏</div>
        <h5 slot="reference" class="item-title">角度弧度互转</h5>
      </el-popover>
      <el-tabs v-model="activeName">
        <el-tab-pane label="单个" name="first">
          <el-form-item label="角度">
            <el-input v-model="form.degree" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="弧度">
            <el-input v-model="form.radian" placeholder="请输入内容"></el-input>
          </el-form-item>
          <div class="text-right item-transform">
            <el-button @click="to" type="primary" size="mini">角转弧</el-button>
            <el-button @click="back" type="primary" size="mini">弧转角</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="多组" name="second">
          <el-form-item label="集合">
            <el-input v-model="form.input" type="textarea" rows="6" placeholder="示例：[45,60]"></el-input>
          </el-form-item>
          <div class="text-right item-transform">
            <el-button @click="toList" type="primary" size="mini">角转弧</el-button>
            <el-button @click="backList" type="primary" size="mini">弧转角</el-button>
          </div>
          <el-form-item label="集合">
            <el-input v-model="form.output" type="textarea" rows="6" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
import * as Cesium from 'cesium'
import { parser } from '@daelui/dogjs/dist/components.js'

export default {
  name: 'degree-to-radian',

  data () {
    return {
      activeName: 'first',
      form: {
        degree: 45,
        radian: 0.7853981633974483,
        input: '[45,60]',
        output: '[0.7853981633974483,1.0471975511965976]'
      }
    }
  },

  methods: {
    to () {
      this.form.radian = Cesium.Math.toRadians(parseFloat(this.form.degree))
    },
    back () {
      this.form.degree = Cesium.Math.toDegrees(parseFloat(this.form.radian))
    },
    toList () {
      let list = parser.parse(this.form.input)
      if (!Array.isArray(list)) {
        this.$message({
          type: 'error',
          message: '数据非数组'
        })
        return true
      }
      list = list.map(item => {
        return Cesium.Math.toRadians(parseFloat(item))
      })
      this.form.output = parser.stringify(list)
    },
    backList () {
      let list = parser.parse(this.form.output)
      if (!Array.isArray(list)) {
        this.$message({
          type: 'error',
          message: '数据非数组'
        })
        return true
      }
      list = list.map(item => {
        return Cesium.Math.toDegrees(parseFloat(item))
      })
      this.form.input = parser.stringify(list)
    }
  }
}
</script>

<style lang="less">
.item-card {
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.item-transform {
  margin-bottom: 8px;
}
.item-title {
  margin: 0;
  padding: 0 0 8px;
}
</style>
